<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1</h1>
        <h4 v-if="order==0">111111</h4>
        <h4 v-else-if="order==1">222222</h4>
        <h4 v-else>3333333</h4>
        <button @click="order=++order%3">切换</button>
        <h1>知识点2</h1>
        <h4 v-show="visible">v-show</h4>
        <h4 v-if="visible">v-if</h4>
        <button @click="visible=!visible">显示，隐藏</button>
        <h4>v-show是通过添加样式来实现隐藏的，v-if是通过删除标签对
            来实现隐藏，通常情况我们优先选择v-show来进行隐藏或显示
        </h4>
        <h1>练习</h1>
        <h4>通过单选框来实现不同的页面</h4>
        <input type="radio" value="管理员" v-model="users">管理员
        <input type="radio" value="教师" v-model="users">教师
        <input type="radio" value="学生" v-model="users">学生
        <button @click="show=true">登录</button>
        <div v-show="show">
        <div v-if="users=='管理员'">
            {{users}},欢迎你我们开始管理吧
        </div>
        <div v-if="users=='教师'">
            {{users}},欢迎你我们开始授课吧
        </div>
        <div v-if="users=='学生'">
            {{users}},欢迎你我们开始上课吧
        </div>
        </div>
        <div id="app">
        <input type="radio" value="QQ登录" v-model="loginType">QQ登录
        <input type="radio" value="手机登录" v-model="loginType">手机登录
        <input type="radio" value="邮箱登录" v-model="loginType">邮箱登录
        <button @click="show=true">登录</button>
        <div v-show="show">
            <div v-if="loginType=='QQ登录'">
                    QQ号：<input type="text" placeholder="请输入QQ号"><br>
                    密码：<input type="password" placeholder="请输入密码">
            </div>
            <div v-if="loginType=='手机登录'">
                    手机号：<input type="text" placeholder="请输入手机号"><br>
                    验证码：<input type="text" placeholder="请输入验证码">
            </div>
            <div v-if="loginType=='邮箱登录'">
                    邮箱账号：<input type="email" placeholder="请输入邮箱"><br>
                     密码：<input type="password" placeholder="请输入密码">
            </div>
        </div>
    </div>
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                order:1,
                visible:false,
                users:'',
                loginType:'',
                show:false
            }
        },
    }).mount("#app")
</script>